import React from 'react';
import { Card, Typography } from 'antd';

const { Title, Paragraph } = Typography;

const Banner = () => {
  const bannerStyle = {
    background: 'linear-gradient(135deg, #ff99c8, #ffb3d9)',
    height: '300px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    color: '#fff',
    padding: '0 20px',
  };

  return (
    <Card style={bannerStyle} bordered={false}>
      <Title level={1} style={{ color: '#fff' }}>
        欢迎来到我的主页
      </Title>
      <Paragraph style={{ color: '#fff', fontSize: '18px' }}>
        一个美观大方、充满粉色系风格的页面
      </Paragraph>
    </Card>
  );
};

export default Banner;